<template>
  <div class="image-upload">
    <DImagePicker
      v-model="value"
      :upload="handleUpload"
      :multiple="props.multiple"
      :max-size="props.maxSize"
      :limit="props.limit"
      :placeholder="props.placeholder"
      allow-paste
    />
  </div>
</template>
<!-- @图片上传 -->
<script setup name="imageUpload">
import request from "@/utils/request";
import { DImagePicker } from "@dcb/admin-ui-plus";
const { proxy } = getCurrentInstance();
const props = defineProps({
  modelValue: [String, Array],
  // 图片数量限制
  limit: {
    type: Number,
    default: 1,
  },
  multiple: {
    type: Boolean,
    default: false, // true才可以上传多张图片
  },
  placeholder: {
    type: String,
    default: "选择图片",
  },
  maxSize: {
    type: Number,
    default: 1, // 单位 M
  },
});
/*------------------------------------------------变量----------------------------------------------------*/
const value = ref("");
const emit = defineEmits(["update:modelValue"]);
watch(
  () => props.modelValue,
  (newValue) => {
    value.value = newValue;
  },
  {
    immediate: true,
  }
);
watch(
  () => value.value,
  (newValue) => {
    emit("update:modelValue", newValue);
  }
);
/*----------------------------------------------事件函数--------------------------------------------------*/
const handleUpload = async (file) => {
  const formData = new FormData();
  formData.append("file", file);
  const { url } = await request({
    url: import.meta.env.VITE_APP_BASE_API + "/common/upload",
    method: "post",
    data: formData,
  });
  return url;
};

/*----------------------------------------------生命周期--------------------------------------------------*/
onMounted(() => {});
</script>
<style scoped lang="scss">
.image-upload {
}
</style>
